import "./App.css";
import { useState } from "react";
import Message from "./components/SyntaxComponent/Message";
import ListGroup from "./components/SyntaxComponent/ListGroup";
import Alert from "./components/SyntaxComponent/Alert";
import Button from "./components/SyntaxComponent/Button";
import CssComponent from "./components/CssComponent/CssComponent";
import IconComponent from "./components/CssComponent/IconComponent";
import ItemInfo from "./components/SharingComponent/ItemInfo";
import BuyCar from "./components/SharingComponent/BuyCar";
import Form from "./components/FormComponent/Form";
import HookForm from "./components/FormComponent/HookForm";
import EffectComponent from "./components/LoadDataComponent/EffectComponent";
import GetDataComponent from "./components/LoadDataComponent/GetDataComponent";

function App() {
  const [count, setCount] = useState(0);
  let arr = ["武汉", "上海", "北京"];

  const parentLog = (item: string) => {
    console.log("print------>item", item);
  };

  const [itemList, setItemList] = useState(["衣服", "鞋子", "包包"]);
  const parentClear = () => {
    setItemList([]);
  };

  return (
    <div className="App">
      <Message></Message>
      <ListGroup arr={arr} title="传参" handleLog={parentLog}></ListGroup>
      <Alert msg="警告">我是children</Alert>
      <Button sex="男"></Button>
      <CssComponent></CssComponent>
      <IconComponent></IconComponent>
      <ItemInfo itemListCount={itemList.length}></ItemInfo>
      <BuyCar itemList={itemList} handleClear={parentClear}></BuyCar>
      <Form></Form>
      <HookForm></HookForm>
      <EffectComponent></EffectComponent>
      <GetDataComponent></GetDataComponent>
    </div>
  );
}

export default App;
